<template>
	<view class="contener">
		<view style="position: fixed;margin-top: 1360rpx;width: 100%;">
			<u-button text="分 享 土 地" type="success" openType="share"></u-button>
		</view>
		<skeleton :skeleton="skeleton" round :loading="loading">
			<block>
				<view class="topBox">
					<image class="localImage" :src="imgapi+plotDetail.banner" mode=""></image>
					<view class="center_horizontal" style="width: 750rpx;">
						<view class="informationBox">
							<view style="width:680rpx;margin: 25rpx 20rpx 0;">
								<view class="xinxi center_vertical">
									<image class="avatarUrl" :src="imgapi+plotDetail.avatar"></image>
									<view class="name">
										<view>
											{{plotDetail.plotName}}
										</view>
										<view class="shopBottomBoxleft center_vertical">
											<view style="text-align:center;height: 80rpx;">
												<image class="collectionimg" src="../static/images/home/weizhi.png">
												</image>
												<view class="shopBottomText" v-if="plotDetail.juli!=null">
													距离{{plotDetail.juli}}km
												</view>
												<view class="shopBottomText" v-else>
													未获取到用户位置
												</view>
											</view>
											<!-- <view class="shareBox">
												<view style="position: absolute;">
													<image class="collectionimg" src="../../static/share.png"></image>
													<view class="shopBottomText">
														分享
													</view>
												</view>
												<button class="sharebtn" open-type="share"></button>
											</view> -->
										</view>

									</view>
								</view>
								<view v-if="$comm.checkNull(plotDetail.label)">
									<uni-tag :text="item" :type="getType(index)" circle size="mini"
										v-for="(item,index) in JSON.parse(plotDetail.label)" :key='item.id'
										style="margin-right: 10px;font-size: 3px;"></uni-tag>
								</view>

								<view class="line"></view>
								<view class="detailsBox">
									<view class="detailsBoxLeft">
										<view v-if="plotDetail.businessType==0||plotDetail.businessType==2">采摘开放时间:
											{{plotDetail.pickOpenTime}}-{{plotDetail.pickOverTime}}
										</view>
										<view v-if="plotDetail.businessType==1||plotDetail.businessType==2">种植开放时间:
											{{plotDetail.growOpenTime}}-{{plotDetail.growOverTime}}
										</view>
										<view v-if="plotDetail.phone">电话: {{plotDetail.phone}}</view>
										<u--text :text="'地址: '+plotDetail.address" :lines="1" v-if="plotDetail.address"
											size="28rpx" color="#808080">
										</u--text>
									</view>
									<view class="detailsBoxRight">
										<button type="primary" v-if="plotDetail.phone" @tap="callphone" plain
											size="mini">致电</button>
										<button type="primary" v-if="plotDetail.address" @tap="handleMapLocation" plain
											size="mini">导航</button>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="content">

						<tabControl :current="current" :values="items" bgc="#fff" :fixed="true" :scrollFlag='true'
							:isEqually='true' @clickItem="onClickItem" activeColor="#72a26e"></tabControl>

						<view v-if="current === 0" class="center_horizontal " style="margin-top: 15rpx;">
							<view class="informationBox2">
								<view class="cardCont" style="margin-bottom: 90rpx; padding: 30rpx;">
									<view>
										<rich-text :nodes="plotDetail.content"></rich-text>
									</view>
								</view>
							</view>
						</view>

						<view v-if="current === 1" style="padding: 20rpx 0 120rpx;">
							<block v-if="show&&actList.length>0">
								<view class="whiteCard" @click="gotoActiveDetail(item.id)" v-for="item in actList"
									:key="item.id">
									<view class="image" v-if="item.banner">
										<image :src="imgapi+item.banner" mode="aspectFill"></image>
									</view>
									<view class="bottom ">
										<uni-title class="textOver" type="h3" :title="item.title">
										</uni-title>
										<view class="secondTit textOver">{{item.overview}}</view>
										<view class="litText">活动时间：{{item.time}}</view>
										<view class="line"></view>
										<view class="timeSay">
											<view class="time">报名时间: 截止至 {{item.timeOut}}</view>
											<view class="rightTit">
												<text
													:style="{color: item.timeStr === '报名中' ? '#4cd964': '#999'}">{{item.timeStr}}</text>
												<uni-icons type="forward"
													:color="item.timeStr === '报名中' ? '#4cd964':'#999'" size="20">
												</uni-icons>
											</view>
										</view>
									</view>
								</view>
								<uni-load-more :status="status" :icon-size="14" :content-text="contentText" />
							</block>
							<view v-if="actList.length<=0">
								<u-empty mode="history" icon="http://cdn.uviewui.com/uview/empty/history.png"
									text="暂无活动, 敬请期待">
								</u-empty>
							</view>
						</view>
					</view>


					<!-- 悬浮 bindtouchmove='redmove' -->
					<movable-area class="movable-area" v-if="hasShow">
						<movable-view class="movable-view" direction="all">
							<view @tap="tzShopList">
								进店看看
							</view>
						</movable-view>
					</movable-area>
				</view>
				<!-- <view class="goods-carts">
					<uni-goods-nav :options="option" :fill="true" :button-group="showGroup" @click="onClick"
						@buttonClick="buttonClick" />
				</view> -->

			</block>
		</skeleton>
	</view>

</template>

<script>
	import dragButton from "@/components/drag-button/drag-button.vue";
	import tabControl from '@/components/tabControl-tag/tabControl-tag.vue';
	import cartcontrol from '@/components/cartcontrol.vue'
	import Skeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	import {
		getMoreTime,
		getTime
	} from "@/utils/auth.js"
	export default {
		components: {
			cartcontrol,
			dragButton,
			Skeleton,
			tabControl
		},
		data() {
			return {
				//进店看看图标
				hasShow: false,
				// 底部栏
				option: [{
					icon: 'icon-fenxiangfangshi',
					text: '分享'
				}],
				showGroup: [], // 要展示的按钮
				customButtonGroup1: [{
					text: '我要摘',
					backgroundColor: 'linear-gradient(90deg, #61b94b, #acda47)',
					color: '#fff'
				}, {
					text: '我要种',
					backgroundColor: 'linear-gradient(90deg, #3aadffd1, #638ce6)',
					color: '#fff'
				}],

				// 活动
				items: ['土地详情', '吃喝玩乐'],
				current: 0,
				show: true,
				ifBottomRefresh: false,
				status: 'more',
				contentText: {
					contentdown: ' ',
					contentrefresh: ' ',
					contentnomore: '暂无更多~'
				},
				params: {
					pageNo: 1,
					pageSize: 10,
				},
				actList: [],

				avatarUrl: '../../static/images/growVegetables/liuliang2.jpg',
				nickName: '礼盒山庄',
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				imgapi: '',
				plotDetail: [],
				tudiid: null,

				loading: true,
				skeleton: [
					'card-lg',
					'circle-sm+line-sm*2',
					40,
					'line-sm',
					'line-sm*3+square-sm*2',
					40,
					'line',
					'card'
				], //骨架屏
			}
		},
		//分享
		onShareAppMessage(res) {
			let usId = uni.getStorageSync("usId")
			let route = this.$mp.page.route;
			this.share.path = route + `?&parentId=${uni.getStorageSync("usId")}&itemId=` + this.itemId
			return this.share
		},
		onLoad(e) {
			//土地详情id	
			this.imgapi = this.$reqConfig.URLIMAGE
			let url = "user/public/plot/detail"
			if (e.parentId != "" && e.parentId != undefined) {
				e.id = e.itemId
				uni.setStorageSync("parentId", e.parentId)
			} else {
				this.itemId = e.id
			}
			this.tudiid = e.id
			this.getDetail(url, e)
		},
		//触底加载状态
		onReachBottom() {
			if (this.status != 'noMore') {
				this.status = 'loading';
				this.ifBottomRefresh = true
				//正式服去掉这个延时器
				this.getActList(this.plotDetail.id)
			}
		},
		methods: {
			getShow() {

			},
			// 底部按钮
			onClick(e) {
				console.log(e)
			},
			buttonClick(e) {
				console.log(e.content.text)
				if (e.content.text == '我要摘') {
					this.tzVegetablesList(0)
				} else {
					this.tzVegetablesList(1)
				}
				return
			},

			cleanList() {
				this.actList = [];
				this.params = {
					pageNo: 1,
					pageSize: 10
				}
				this.status = 'loading';
				this.ifBottomRefresh = true
			},
			getActList(id) {
				this.imgapi = this.$reqConfig.URLIMAGE
				this.$axios({
					url: "user/public/activity/list",
					method: "post",
					data: {
						pageNo: this.params.pageNo,
						pageSize: this.params.pageSize,
						plotId: id
					}
				}).then((res) => {
					//请求接口成功之后，判断加载状态，处理数据						
					if (res.result.pages >= this.params.pageNo) {
						if (this.ifBottomRefresh) {
							this.actList = this.actList.concat(res.result.list)
						} else {
							this.actList = res.result.list
						}
						this.actList.forEach(val => {
							val.time = getMoreTime(val.openTime, val.overTime)
							val.timeOut = getTime(val.openTime, "ch")
							// this.$set(val,"time",time)
							val.timeStr = this.judgeTime(val.openTime, val.overTime)
						})
					} else {
						this.status = 'noMore'
					}

					if (this.params.pageNo >= res.result.pages) {
						this.status = 'noMore'
					}
					console.log("this.actList.size(): ", this.actList.length)
					this.params.pageNo++;
					// 骨架屏取消
					this.loading = false;
				})
			},
			/* 
				0"已结束"
				1"进行中"
				2"报名中"
			 */
			// 判断时间
			judgeTime(startTime, endTime) {
				let time = new Date().getTime()
				if (time >= endTime) {
					return "已结束"
				} else if (time >= startTime) {
					return "进行中"
				} else {
					return "报名中"
				}
			},
			getStatus(n) {

				switch (n) {
					case 0:
						return '<span style="color:#999">已结束</span>'
					case 1:
						return '<span >进行中</span>'
					case 2:
						return '<span style="color:#999">报名中</span>'
				}
			},
			getDetail(url, e) {
				let dingwei=uni.getStorageSync("dingwei");
				//请求
				this.$axios({
					url: url,
					method: "post",
					data: {
						id: e.id,
						lat: dingwei.latitude,
						lng: dingwei.longitude
					}
				}).then((res) => {
					// 骨架屏取消
					this.loading = false;
					console.log('2333333', res);
					this.plotDetail = res.result
					//存储商家id
					uni.setStorageSync('merchantId', this.plotDetail.rawMerchantId);
					if (this.plotDetail.content.indexOf(this.$reqConfig.URLIMAGE) == -1) {
						this.plotDetail.content = this.plotDetail.content.replace(/\<img src="/gi,
							'<img src=' + '\"' + this.$reqConfig.URLIMAGE)
					}
					// 处理底部按钮
					// this.plotDetail.businessType = 0 // 测试
					let type = this.plotDetail.businessType
					if (type == 2) {
						this.showGroup = this.customButtonGroup1
					} else if (type == 0) {
						this.showGroup = [this.customButtonGroup1[0]]
					} else {
						this.showGroup = [this.customButtonGroup1[1]]
					}
					this.getActList(this.plotDetail.id)

					//分享进来的，渲染完成后判断是否登录过，没有登录就跳去登录
					let token = uni.getStorageSync("token")
					let avatarUrl = uni.getStorageSync("avatarUrl")
					if (!token || !avatarUrl) {
						uni.navigateTo({
							url: "../mine/loginPage"
						})
					}
				})
			},
			gotoActiveDetail(id) {
				uni.navigateTo({
					url: "./activeDetail?id=" + id,
				})
			},
			goPage(url, val) {
				uni.navigateTo({
					url: `${url}?val=${JSON.stringify(val)}`
				})
			},
			// 活动
			onClickItem(e) {
				// this.cleanList()
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},

			// 跳转商品列表
			tzShopList() {

				uni.navigateTo({
					url: `./shopList?id=${this.plotDetail.rawMerchantId}`
				})
			},
			// 跳转菜地列表
			tzVegetablesList(type) {
				uni.navigateTo({
					url: `./vegetablesList?type=${type}&id=${this.tudiid}`
				})
			},
			// 打电话
			callphone() {
				uni.makePhoneCall({
					phoneNumber: this.plotDetail.phone //仅为示例
				});
			},
			// 导航
			handleMapLocation() {
				if (!this.plotDetail.address) {
					uni.showToast({
						title: "商家未填地址",
						icon: "none"
					})
					return
				}

				uni.showLoading({
					title: "加载中"
				})			
				let address = this.plotDetail.address
				// 获取定位信息
				uni.getLocation({
					type: 'wgs84', //返回可以用于uni.openLocation的经纬度
					// 用户允许获取定位
					success: function(res) {						
						if (res.errMsg == "getLocation:ok") {
							uni.openLocation({
								// 传入你要去的纬度
								latitude: res.latitude,
								// 传入你要去的经度
								longitude: res.longitude,
								// 传入你要去的地址信息 不填则为空
								address: address,
								// 缩放大小
								scale: 10,
								success: function() {
									uni.hideLoading()
									console.log('成功的回调success');
								}
							});
						}
					},
					// 用户拒绝获取定位后 再次点击触发
					fail: function(res) {
						uni.hideLoading()
						console.log(res)
						if (res.errMsg == "getLocation:fail auth deny") {
							uni.showModal({
								content: '检测到您没打开获取信息功能权限，是否去设置打开？',
								confirmText: "确认",
								cancelText: '取消',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: (res) => {
												console.log('确定');
											}
										})
									} else {
										console.log('取消');
										return false;
									}
								}
							})
						}
					}
				});
			},
			getType(index) {
				switch (index) {
					case 0:
						return "success"
					case 1:
						return "default"
					case 2:
						return "warning"
					case 3:
						return "error"
				}
			},

		}
	}
</script>

<style scoped lang="scss">
	/deep/.fxied {
		position: relative !important;
		z-index: 0 !important;
	}

	/deep/.uni-tag--success {
		background: linear-gradient(90deg, #89ae47, #6d9417);
	}

	/deep/.uni-tag--default {
		background: linear-gradient(90deg, #ce6248, #f77e81);
	}

	/deep/.uni-tag--warning {
		background: linear-gradient(90deg, #f6af6b, #b75f33);
	}

	/deep/.uni-tag--error {
		background: linear-gradient(90deg, #2ab0fe, #027aef);
	}

	/deep/.u-button.data-v-2bf0e569 {
		height: 45px;
	}

	/deep/.uni-tag--mini {
		font-size: 19rpx !important;
		display: inline-block;
		padding: 8rpx 18rpx !important;
		border: none !important;
	}

	.content {
		padding: 0 25rpx;
		margin-top: 40rpx;

		/deep/.segmented-control {
			height: 100rpx;
		}

		.whiteCard {
			// padding-top: 0;
			margin-bottom: 30rpx;
			padding: 0;

			.image {
				height: 300rpx;

				image {
					height: 100%;
					width: 100%;
				}
			}

			.bottom {
				padding: 20rpx;
				padding-top: 0;

				/deep/.uni-h3 {
					width: 100%;
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.secondTit {
					color: #999;
					font-size: 28rpx;
					margin-top: -10rpx;
				}

				.litText {
					color: #999;
					font-size: 28rpx;
					margin: 25rpx 0;
				}

				.line {
					margin-top: 0;
					width: 100%;
				}

				.timeSay {
					margin: 30rpx 0 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					color: #999;

					.rightTit {
						// color: #4cd964;
					}
				}
			}
		}
	}

	/deep/.segmented-control__text {
		font-size: 40rpx;
		font-weight: bold;
	}

	.widthBtn {
		width: 100% !important;
	}

	.movable-area {
		width: 100%;
		height: calc(100vh - 100rpx);
		position: fixed;
		top: 0;
		z-index: 0;
		pointer-events: none;
	}

	.shareBox {
		width: 60rpx;
		height: 80rpx;
		position: relative;
		margin-left: 20rpx;
	}

	.sharebtn {
		position: absolute;
		height: 80rpx;
		width: 60rpx;
		z-index: 99;
		opacity: 0.1;
		background-color: #fff;
	}

	.movable-view {
		pointer-events: auto;
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 50%;
		top: 70%;
		left: 730rpx;
		color: #fff;
		font-size: 20rpx;
		font-weight: bold;
		text-align: center;
		opacity: 0.7;
		background: #4CD964;
	}

	.topBox {
		width: 100%;
		height: calc(100vh - 120rpx);
		margin-bottom: 20rpx;
	}

	.localImage {
		width: 750rpx;
		height: 400rpx;
	}

	.informationBox {
		min-height: 400rpx;
		border-radius: 15rpx;
		width: 700rpx;
		margin-top: -80rpx;
		background-color: #fff;
	}

	.informationBox2 {
		height: 100%;
		border-radius: 15rpx;
		width: 700rpx;
		margin: 0 auto;
		background-color: #fff;
	}

	.xinxi {
		height: 100%;
		width: 100%;
		margin-bottom: 20rpx;
	}

	.avatarUrl {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background: #c4c4c4;
	}

	.name {
		/* margin-left: 25rpx; */
		font-size: 35rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 80%;
		margin-left: 20rpx;
	}

	.collectionimg {
		width: 35rpx;
		height: 35rpx;

	}

	.line {
		width: 96%;
		margin-top: 40rpx;
		border-bottom: 1rpx solid #C4C4C4;

	}

	.shopBottomText {
		font-size: 20rpx;
	}


	.shopBottomBox {
		position: fixed;
		bottom: 0;
		height: 100rpx;
		line-height: 100rpx;
		width: 750rpx;
		background-color: #fff;
		display: flex;
		justify-content: flex-end;
	}

	.shopBottomBoxleft {
		// width: 35%;
		/* margin-top: 20rpx; */
		/* display: flex;
		align-items: center;
		justify-content: space-between; */
		text-align: center;
		margin-right: 20rpx;
	}

	.detailsBoxLeft {
		width: 65%;
		font-size: 28rpx;
		color: #808080;
	}

	.detailsBoxRight {
		margin-left: auto;
		width: 25%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.detailsBox {
		height: 155rpx;
		padding: 20rpx 25rpx;
		display: flex;
	}

	.zhaibox {
		width: 50%;
		background-color: #F0AD4E;
		text-align: center;
		color: #fff;
	}

	.zhongbox {
		width: 50%;
		background-color: #3cc51f;
		text-align: center;
		color: #fff;
	}

	.title {
		width: 750rpx;
		text-align: center;
		margin: 35rpx 0;
		color: #3cc51f;
		font-size: 40rpx;
		font-weight: bold;
	}
</style>
